<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: wupy
 * @LastEditTime: 2022-01-08 16:16:09
-->
<template>
  <!--1. 容器 -->
  <div ref="left1_container" id="container" style="height: 95%"></div>
</template>
<script>
// 引入折线图构造函数
import { Line } from "@antv/g2plot";

export default {
  data() {
    return {
      dataArr: [
        { year: "2010", value: 46000 },
        { year: "2011", value: 48700 },
        { year: "2012", value: 53300 },
        { year: "2013", value: 55500 },
        { year: "2014", value: 57500 },
        { year: "2015", value: 61800 },
        { year: "2016", value: 63300 },
        { year: "2017", value: 75300 },
        { year: "2018", value: 85100 },
        { year: "2019", value: 90400 },
        { year: "2020", value: 91300 },
      ],
    };
  },
  created() {

  },
  mounted() {
   this.initChart()
  },
  methods: {
    initChart() {
      // 创建一个折线图对象
      const line = new Line(this.$refs.left1_container, {
        data:this.dataArr,
        xField: "year",
        yField: "value",
      });
      // 渲染图像
      line.render();
    },
  },
};
</script>
